<template>
  <!-- 提交弹窗	开始 -->
  <el-dialog
    class="dialogDF"
    :title="title"
    :visible.sync="innerVisible"
    width="600px"
    :append-to-body="true"
  >
    <div>
      <el-form
        class="storeFormStyle"
        size="medium"
        label-width="150px"
        @submit.native.prevent
      >
        <el-row>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="请选择导入文件">
              <el-upload
                class="upload-btn"
                action="#"
                :before-upload="beforeUpload"
                accept=".xlsx, .xls"
              >
                <div style="display: flex; justify-content: start">
                  <el-input
                    size="small"
                    placeholder="文件名"
                    v-model="fileName"
                    :disabled="true"
                    class="file-tips"
                  >
                  </el-input>
                  <el-button size="small" style="margin-left: 10px"
                    >添加文件</el-button
                  >
                </div>

                <div
                  style="text-align: left"
                  v-if="fileImportObj.fileImportStatus === 1"
                >
                  <span style="color: #67c23a">患者信息导入成功！</span>
                </div>

                <div
                  style="text-align: left"
                  v-if="fileImportObj.fileImportStatus === 0"
                >
                  <span style="color: #f56c6c">患者信息导入失败！</span>
                  <span style="color: #409eff" @click="handleTemplateExport"
                    >点击查看</span
                  >
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="goUpload"
        :disabled="fileImportButtonIsDisabled"
        >导 入</el-button
      >
      <el-button @click="innerVisible = false">取 消</el-button>
    </div>
  </el-dialog>
  <!-- 提交弹窗	结束 -->
</template>

<script>
import vModelDialog from '@/mixins/vModelDialog.js'

export default {
  name: 'Dialog',
  mixins: [vModelDialog],
  inject: ['reload'],
  data() {
    return {
      fileName: '',
      tempFile: null,
      fileImportButtonIsDisabled: false
    }
  },
  props: {
    fileImportObj: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    innerVisible: function (val, oldVal) {
      if (val === false && oldVal === true) {
        this.fileName = ''
        this.tempFile = null
      }
    }
  },
  methods: {
    beforeUpload(file) {
      const isXlsx = file.name.indexOf('xls') !== -1

      if (!isXlsx) {
        this.$message.error('请上传正确的文件格式！')
      } else {
        this.fileImportButtonIsDisabled = false
        this.tempFile = file
        this.fileName = file.name
      }
      return false
    },

    goUpload() {
      const formData = new FormData()
      if (!this.tempFile) {
        this.$notify.warning('请选择导入文件！')
        return
      }

      formData.append('file ', this.tempFile)

      this.fileImportButtonIsDisabled = true

      this.$emit('child-operation', { file: formData })
    },

    /**
     * @function handleTemplateExport
     * @description 导出模版
     * @params {}
     * @return null
     */
    async handleTemplateExport() {
      window.location.href = this.fileImportObj.fileImportFailedUrl
      this.$message.success('下载成功！')
    }
  }
}
</script>

<style lang="scss">
.dialogDF {
  :deep(.el-upload) {
    display: block;
  }
}
</style>
